<template>
	<view class="page notice-friend">
		<nav-header title="好友申请" :show-right="false">
		</nav-header>

		<up-loading-page :loading="loading"></up-loading-page>
		<view class="friend" v-for="(item,index) in friendList" :key="item.id">
			<view class="friend-item">
				<view class="item-left">
					<!-- <img :src="item.headImage" alt="" class="left-img"> -->
					<view class="fc">
						<head-image :url="item.applyUser.headImageThumb" :name="item.applyUser.nickName" :size="90"></head-image>
						<view class="left-text">
							<text class="nickname">{{item.applyUser.nickName}}</text>
							<view v-if="item.applyUser.sex==0" class="fc">
								<svg-icon icon="sex" v-if="item.applyUser.sex==0" :width="32"></svg-icon>
								<text class="text-sm-Regular">男</text>
							</view>
							<view v-if="item.applyUser.sex==1" class="fc">
								<svg-icon icon="woman" v-if="item.applyUser.sex==1" :width="32"></svg-icon>
								<text class="text-sm-Regular">女</text>
							</view>
							<!-- <text class="message">附加信息：{{item.greetings}}</text>
						<text>来源：{{item.from}}</text> -->
						</view>
					</view>
					<view class="text-xs-Medium">
						<text v-if="item.status==0 && isMe[index]" style="color: #F79009;">等待通过</text>
						<text v-if="item.status==1" style="color: #A4A7AE;">已添加</text>
						<text v-if="item.status==2" style="color: #A4A7AE;">已拒绝</text>
					</view>
				</view>
				<view class="greetings">
					<text class="text-sm-Regular message">附加信息：{{item.greetings}}</text>
				</view>
				<up-line v-if="item.status==0 && !isMe[index]"></up-line>
				<view class="item-right" v-if="item.status==0 && !isMe[index]">
					<button class="refuse" plain type="primary" size="mini" v-if="item.status==0 && !isMe[index]"
						@tap="Refuse(item.id)">
						<text class="text-xs-Medium">拒绝</text>
					</button>
					<button class="agree" type="primary" size="mini" v-if="item.status==0 && !isMe[index]"
						@tap="Agree(item.id)">
						<text class="text-xs-Medium">通过申请</text>
					</button>
					<!-- <text v-if="item.status==0 && isMe">等待验证</text>
					<text v-if="item.status==1">已添加</text> -->
				</view>
			</view>
			<up-divider v-if="index!=friendList.length-1" style="margin:unset;"></up-divider>
		</view>
		<view v-if="friendList.length==0 && !loading" style="margin-top: 50%;">
			<up-empty :icon="getResource('/icon/empty-message.svg')"  text="暂无数据">
			</up-empty>
		</view>
	</view>
</template>

<script>
	import {
		isAllFieldEqual
	} from '../../utils';

	export default {
		data() {
			return {
				friendList: [],
				pageNum: 1,
				pageSize: 10,
				loading: false,
				hasMore: true
			}
		},
		computed: {
			isMe() {
				// let result = false;
				// return isAllFieldEqual(this.friendList, 'applyId', this.userStore.userInfo.id)
				// 使用 map 方法来创建一个布尔值数组
				return this.friendList.map(obj => String(obj.applyId) === String(this.userStore.userInfo.id));
				// return result;
			}
		},
		methods: {
			getData() {
				if (this.loading) return
				this.loading = true
				this.$http({
					url: `/systemMessage/findSystemMessageByType?type=55&pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
					method: "POST"
				}).then((data) => {
					if (data.records.length > 0) {
						data.records.forEach(item => {
							if (item.messageDetail) {
								const messageDetail = JSON.parse(item.messageDetail);
								this.friendList.push(messageDetail)
							}
						})
						console.log(this.friendList);
						this.pageNum++
					} else {
						this.hasMore = false
					}
					this.loading = false
				})
			},
			Agree(id) {
				this.$http({
					url: `/friend/approveAddFriend?id=${id}`,
					method: "PUT"
				}).then((data) => {
					uni.showToast({
						title: '对方已成为您的好友',
						icon: 'none'
					})
					this.loading = false
					this.pageNum = 1
					this.friendList = []
					this.getData()
				})
			},
			Refuse(id) {
				this.$http({
					url: `/friend/refuseAddFriend?id=${id}`,
					method: "PUT"
				}).then((data) => {
					uni.showToast({
						title: '已拒绝',
						icon: 'none'
					})
					this.loading = false
					this.pageNum = 1
					this.friendList = []
					this.getData()
				})
			}
		},
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.getData();
			}
			if (!this.hasMore) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
				return
			}
		},
		onShow() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.notice-friend {
		.friend {
			width: 100%;

			.friend-item {
				background-color: white;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 16rpx;
				// align-items: center;

				.item-left {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left-img {
						width: 100rpx;
						height: 100rpx;
					}

					.left-text {
						display: flex;
						flex-direction: column;
						gap: 8rpx;
						margin-left: 10rpx;
						font-size: 27rpx;
						color: #6f6f6f;

						.nickname {
							color: #000;
							font-size: 32rpx;
						}

						.message {
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 450rpx;
						}
					}
				}

				.greetings {
					color: $gray-400;
					padding-bottom: 8rpx;
				}

				.item-right {
					padding: 8rpx 0;
					text-align: right;

					.refuse {
						border: 1rpx solid $gray-400;
						color: $gray-400;
						border-radius: 34rpx;
						padding: 8rpx 24rpx;
						height: 56rpx;
						line-height: 36rpx;
						margin-right: 24rpx;
					}

					.agree {
						background-color: $brand-500;
						color: $white;
						border-radius: 34rpx;
						padding: 8rpx 24rpx;
						height: 56rpx;
						line-height: 36rpx;
					}
				}
			}
		}

		.fc {
			display: flex;
			align-items: center;
			gap: 8rpx;
		}
	}
</style>